<template>
  <div>
    <input type="text" v-focus>
    <button @click="showHide">过渡</button>
    <transition name="fade">
      <p v-show="show">djlsdjlkj</p>
    </transition>
    <button @click="showHideAnim">动画</button>
    <transition name="hello">
      <p v-show="showAnim">动画donghua</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "anim",
  data() {
    return {
      show: true,
      showAnim: true,
    };
  },
  methods: {
    showHide() {
      this.show = !this.show;
    },
    showHideAnim() {
      this.showAnim = !this.showAnim;
    },
  },
};
</script>

<style scoped>
/* .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
    opacity :0;
} */
/* 从0-1过程*/
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translate(100px, 0);
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
  transform: translate(0px, 0);
}
.fade-leave-active {
  transition: opacity 0.5s;
}

.hello-enter-active {
  animation: bounce-in 1s ease;
}
.hello-leave-active {
  animation: bounce-in 1s ease reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}
</style>